<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- @input="" 使用 -->
        <input type="text" @input="addText">
    </div>
    
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data(){
                return{
                    msg:"hello!"
                }
            },
            methods:{
                addText(event){
                    // console打印@input="addText"所在整个元素标签
                    console.log(event.target);
                    // console打印@input="addText"元素所在value值
                    console.log(event.target.value);
                    // console打印@input="addText"元素的标签名
                    console.log(event.target.tagName);

                    this.msg = event.target.value;
                    // event.target.value=''; 如果加上这一句这个，就只能按一个字母了
                }
            },
            computed:{},
            watch:{}
        })
    </script> 
</body>
</html>